<template>
  <el-drawer
    title="订单详情"
    :visible.sync="showOrder"
    size="1000px"
    :wrapper-closable="!modalDialog"
  >
    <div class="property-title">订单信息</div>
    <div class="df_ac">
      <div>
        <span class="key">订单编号：</span>
        <span class="value">{{ detail.orderId }}</span>
      </div>
      <div>
        <span class="key">订单状态：</span>
        <span class="value">{{ detail.orderStatus }}</span>
      </div>
      <div>
        <span class="key">创建时间：</span>
        <span class="value">{{ detail.orderTime }}</span>
      </div>
      <div v-if="detail.payTime" class="flex1">
        <span class="key">支付时间：</span>
        <span class="value">{{ detail.payTime }}</span>
      </div>
      <div>
        <span class="key">订单来源：</span>
        <span class="value">{{ fromType(detail.fromType) }}</span>
      </div>
      <div>
        <span class="key">订单金额：</span>
        <span class="value">{{ detail.orderPrice }}</span>
      </div>
      <div>
        <span class="key">支付方式：</span>
        <span class="value">{{ detail.payMethod || '-' }}</span>
      </div>
      <div>
        <span class="key">操作员：</span>
        <span class="value">{{ detail.createUser }}</span>
      </div>
      <!-- <div>
        <span class="key">支付单号：</span>
        <span class="value">{{ detail.orderNum }}</span>
      </div> -->
      <div v-if="detail.finishTime">
        <span class="key">完成时间：</span>
        <span class="value">{{ detail.finishTime }}</span>
      </div>
      <div v-if="detail.refundPrice">
        <span class="key">退款金额：</span>
        <span class="value">{{ detail.refundPrice }}</span>
      </div>
      <div>
        <span class="key">备注：</span>
        <span class="value">{{ detail.remake }}</span>
      </div>
    </div>

    <div class="line-style mb20" />
    <div class="property-title">开票情况</div>
    <div class="df_ac">
      <div>
        <span class="key">开票状态：</span>
        <span class="value">{{ detail.invoiceStatus }}</span>
      </div>
      <div>
        <span class="key">开票时间：</span>
        <span class="value">{{ detail.invoiceTime || "~" }}</span>
      </div>
    </div>

    <div class="line-style mb20" />
    <div class="property-title">买家信息</div>
    <div class="df_ac">
      <div>
        <span class="key">姓名：</span>
        <span class="value">{{ detail.memberName }}</span>
      </div>
      <div>
        <span class="key">联系电话：</span>
        <span class="value">{{ detail.memberPhone || '-' }}</span>
      </div>
      <div v-if="detail.memberId">
        <span class="key">会员卡号：</span>
        <span class="value">{{ detail.memberId }}</span>
      </div>
    </div>
    <div class="line-style mb20" />
    <div class="property-title">场地信息</div>

    <el-table
      :data="detail.orderDetailList"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column
        type="index"
        align="center"
        label="编号"
        width="50"
      />
      <el-table-column
        align="center"
        label="场地"
        prop="sitePlace"
        min-width="180"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="日期"
        prop="day"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column align="center" label="时间段" min-width="100">
        <template v-slot="scope">
          <span>{{ scope.row.beginTime }}-{{ scope.row.endTime }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="原价" min-width="100" prop="price" />
      <el-table-column align="center" label="折后价" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.memberPrice?scope.row.memberPrice : scope.row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态" min-width="100">
        <template v-slot="scope">
          <span>{{ isDiscardName(scope.row.isDiscard) }}</span>
        </template>
      </el-table-column>
    </el-table>

    <div v-if="detail.detailMoneyRespParam" class="bottom_wrap">
      <div class="line">
        <span>订单商品金额：</span>
        <span v-if="detail.detailMoneyRespParam">{{ detail.detailMoneyRespParam.orderPrice || 0 }}</span>
        <span>元</span>
      </div>
      <div v-if="detail.detailMoneyRespParam.memberDiscount" class="line">
        <span>会员折扣：</span>
        <span v-if="detail.detailMoneyRespParam.memberDiscount">-</span>
        <span v-if="detail.detailMoneyRespParam">{{ detail.detailMoneyRespParam.memberDiscount || 0 }}</span>
        <span>元</span>
      </div>
      <div v-if="detail.detailMoneyRespParam.marketingPolicy" class="line">
        <span>营销政策：</span>
        <span v-if="detail.detailMoneyRespParam.marketingPolicy">-</span>
        <span v-if="detail.detailMoneyRespParam">{{ detail.detailMoneyRespParam.marketingPolicy || 0 }}</span>
        <span>元</span>
      </div>
      <div v-if="detail.detailMoneyRespParam.groupBuyCoupon" class="line">
        <span>团购券：</span>
        <span v-if="detail.detailMoneyRespParam.groupBuyCoupon">-</span>
        <span v-if="detail.detailMoneyRespParam">{{ detail.detailMoneyRespParam.groupBuyCoupon || 0 }}</span>
        <span>元</span>
      </div>
      <div v-if="detail.detailMoneyRespParam.discountCoupon" class="line">
        <span>优惠券：</span>
        <span v-if="detail.detailMoneyRespParam.discountCoupon">-</span>
        <span v-if="detail.detailMoneyRespParam">{{ detail.detailMoneyRespParam.discountCoupon || 0 }}</span>
        <span>元</span>
      </div>
      <div v-if="detail.detailMoneyRespParam.integral" class="line">
        <span>积分抵扣：</span>
        <span v-if="detail.detailMoneyRespParam.integral">-</span>
        <span v-if="detail.detailMoneyRespParam">{{ detail.detailMoneyRespParam.integral || 0 }}</span>
        <span>元</span>
      </div>
      <div v-if="detail.detailMoneyRespParam.getPrice || detail.detailMoneyRespParam.getPrice === 0" class="line secondColor">
        <span>实收款：</span>
        <span v-if="detail.detailMoneyRespParam">{{ detail.detailMoneyRespParam.getPrice || 0 }} </span>
        <span>元{{ detail.mealsMemberId?'(预定次卡)':'' }}</span>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { siteOrderInfo } from '@/api'
import store from '@/store'
export default {
  name: 'OrderDetail',
  data() {
    return {
      detail: {},
      modalDialog: store.getters.dialog,
      showOrder: false, // 弹窗
      listLoading: false
    }
  },
  methods: {
    showDetail(detail) {
      this.showOrder = true
      this.detail = detail
    },
    fromType(type) {
      switch (type) {
        case '02': return '场馆PC端'
        case '01': return '小程序'
        default: return '-'
      }
    },
    isDiscardName(type) {
      if (this.detail.orderStatus === '待支付') {
        if (type === '0') {
          return '待支付'
        } else if (type === '1') {
          return '已取消'
        }
      } else if (this.detail.orderStatus === '已取消' || this.detail.orderStatus === '取消支付') {
        return '已取消'
      } else if (this.detail.orderStatus === '已退款') {
        return '已退款'
      } else if (type === '0') {
        return '已支付'
      } else if (type === '1') {
        return '已退款'
      } else {
        return '-'
      }
    },
    getOrderDetail(businessId) {
      this.listLoading = true
      siteOrderInfo({ param: { businessId }}).then((res) => {
        this.listLoading = false
        if (res.errorCode === '000000') {
          this.showOrder = true
          this.detail = res.record
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.df_ac {
  flex-wrap: wrap;
  div {
    width: 33.33%;
    margin-bottom: 20px;
    .key {
  color: #666666;
  display: inline-block;
  // width: 90px;
  // text-align: right;
}
.value {
  color: #222;
}
  }
}
.bottom_wrap {
  margin-top: 30px;
  text-align: right;
  .line {
    margin-bottom: 10px;
  }
}
</style>
